<template>
	<div id="active_code_manage" class="container">
		<div class="content">
			<div class="title">活码管理</div>
			<div class="panel">
				<div class="condition">
					<div class="row_one">
						<el-select v-model="param.posterId" @change="search()"
							placeholder="请选择海报" style="width: 2.5rem;" >
						    <el-option v-for="item in posterList" :key="item.posterId"
						      		   :label="item.posterName" :value="item.posterId">
						    </el-option>
						</el-select>
						<template v-if="param.posterId">
							&nbsp;
							<el-input style="width: 3rem;" placeholder="搜索 二维码名称" clearable
				   				 		  v-model="param.activityQrCodeName" class="input_search" maxlength="100">
				  			</el-input>
				  			&nbsp;
				  			<div class="search_btn" v-if="hasApi('activeCodeList')" @click="search()">搜索</div>
							
							<div class="right_btn" v-if="hasApi('activeCodeAdd')" @click="openAdd()">新建活码</div>
						</template>
					</div>
				</div>
				
				<div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 2rem;">序号</td>
								<td style="width: 4.5rem;">二维码名称</td>
								<td style="width: 3rem;">新建时间</td>
								<td style="width: 3rem;">创建人</td>
								<td style="width: 3rem;">扫码统计（次）</td>
								<td style="width: 3rem;">操作</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item,index in activeCodeList">
								<td>{{(param.currPage-1) * param.pageSize + index + 1}}</td>
								<td>{{item.activityQrCodeName}}</td>
								<td>{{item.createTime}}</td>
								<td>{{item.createUserName}}</td>
								<td>{{item.sweepsNum}}</td>
								<td>
									<span class="operate_btn" v-if="hasApi('activeCodeUpdate')" @click="openEdit(item)">编辑</span>
									&nbsp;
									<span class="operate_btn" @click="downloadQrCode(item)">下载</span>
									&nbsp;
									<span class="operate_btn" v-if="hasApi('activeCodeDelete')" @click="toDelete(item.activityQrCodeId)">删除</span>
								</td>
							</tr> 
						</tbody>
					</table>
				</div>
				<template v-if="param.posterId">
					<el-pagination
				      layout="total, sizes, prev, pager, next, jumper"
				      :current-page="param.currPage"
				      @size-change="pageSizeChange"
			      	  @current-change="pageIndexChange"
				      :total="count">
				    </el-pagination>
				    <div class="code_size">* 二维码规则默认为55x55（cm）</div>
			    </template>
			    <div v-else class="attention">
					请选择某个海报查看活码
				</div>
				
			    <div id="active_code" hidden> </div>
			</div>
		</div>
		
		<activeCodeAdd ref="activeCodeAdd" @callback="closeAdd"></activeCodeAdd>
		<activeCodeEdit ref="activeCodeEdit" @callback="closeEdit"></activeCodeEdit>
	</div>
</template>

<script>
	
import QRCode from 'qrcodejs2'; // 引入qrcode	
import activeCodeAdd from './common/active_code_add'
import activeCodeEdit from './common/active_code_edit'
	
var vm,dict;
var $activeCode;
export default {
	components : {
		activeCodeAdd,activeCodeEdit
	},
	data : function() {
		return {
			param : {
				activityQrCodeName : "",
				posterId : "",
				currPage : 1,
				pageSize : 10
			},
			posterList : [],
			count : null,
	        activeCodeList : [],
	        qrCodeObj : null, //二维码对象
		}
	},
	methods : {
		search : function(currPage) {
			vm.param.currPage = currPage || 1;
			
			api.activeCodeList(vm.param).then(function(data) {
				vm.activeCodeList = data.list;
				vm.count = data.totalCount;
			})
		},
		campusChange : function(campusId) { //校区改变
			vm.param.campusId = campusId;
			vm.search();
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
		openPosterManage : function() {
			var path = vm.$store.state.permit["63"].path;
	  		vm.$router.push({path: path});
		},
	  	toDelete : function(id) {
	  		tool.confirm("确认删除?", {
        		confirmButtonText: "确定", cancelButtonText: "取消", type: 'warning'
       	 	}).then(function() {
          		api.activeCodeDelete({activityQrCodeId : id}).then(function(data) {
		  			vm.search();
		  			tool.message({ showClose: true, message: "删除成功", type: 'success' });
		  		})
        	});
	  	},
	  	downloadQrCode : function(activeCode) {  //下载二维码
	  		var qrCode = "";
	  		vm.posterList.forEach(function(item) {
	  			if(item.posterId == vm.param.posterId) {
	  				qrCode = item.qrCode;
	  				return false;
	  			}
	  		})
	  		//加上查询参数
	  		qrCode += (qrCode.indexOf("?")>=0? "&" : "?");
	  		qrCode += "activityQrCodeId=" + activeCode.activityQrCodeId;
	  		
	  		vm.qrCodeObj.clear(); // 清除二维码
			vm.qrCodeObj.makeCode(qrCode);
			
			setTimeout(function() {
				//获取图片元素
		  		var $img = $activeCode.find("img");
		  		//生成a标签,设置路径和下载名
		        var a = document.createElement('a');          
		        a.download = activeCode.activityQrCodeName+'.jpg';               
		        a.href = $img.attr("src"); 
		        //触发a标签点击事件
		        a.dispatchEvent(new MouseEvent('click'));
			},0);
	  	},
		openAdd : function() {
			vm.$refs.activeCodeAdd.init(vm.param.posterId);
		},
		closeAdd : function() {
			vm.search();
		},
		openEdit : function(activeCode) {
			vm.$refs.activeCodeEdit.init(activeCode);
		},
		closeEdit : function() {
			vm.search();
		}
	},
	mounted : function() {
		$activeCode = $("#active_code");
		//创建二维码对象
		vm.qrCodeObj = new QRCode("active_code", {
			width: 1559,
			height: 1559
		});
		
	},
	created : function() {
		vm = this;
		
		//查询所有海报列表
		api.posterListAll({campusId: vm.$store.state.campusId}).then(function(data) {
			vm.posterList = data.list;
		});
	}
}

</script>

<style lang="scss">
	#active_code_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
	.panel {
		position: relative;
	}
	.right_btn {
		background-image: url(~@/assets/img/clue_manage/add_white.png);
	}
	.code_size {
		position: absolute;
		bottom: 0.42rem;
		left: 0.3rem;
		font-size: 0.14rem;
		color: #666666;
	}
	.attention {
		margin: 0.2rem auto 0 auto;
		font-size: 0.18rem;
		line-height: 0.18rem;
		color: #3885f8;
		width: 2.4rem;
		padding-left: 0.24rem;
		background: url(~@keer/assets/img/operation_manage/attention.png)
		 			no-repeat left center / 0.18rem;
	}
</style>